//开发环境下webpack的配置

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

//开发环境下耗时分析
const SpeedMeasurePlugin = require('speed-measure-webpack-plugin');
const smp = new SpeedMeasurePlugin();

const config = {
  //开发环境
  mode: 'development',
  //入口文件
  entry: './src/index.tsx',
  //源码映射方式
  devtool: 'eval-source-map',
  //路径解析规则
  resolve: {
    //引入模块时不带文件后缀
    extensions: ['.js', '.tsx', '.ts'],
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
  //开启缓存优化
  cache: {
    type: 'filesystem', // 使用文件缓存
  },
  //使用插件
  plugins: [
    new HtmlWebpackPlugin({
      //生成的html文件名
      filename: 'index.html',
      //指定模版文件
      template: 'src/index.html',
      minify: true,
    }),
    new CleanWebpackPlugin(),
  ],
  //模块加载规则  loader
  module: {
    rules: [
      //处理css和less文件
      {
        test: /\.(css|less)$/, // 基于正则匹配：哪些文件是我们需要处理的
        use: [
          'style-loader', // 把css以内嵌式导入到页面
          'css-loader', //处理特殊语法
          'postcss-loader', //配合autoprefixer&browserlist给css3属性设置前缀【兼容】
          'less-loader', //把less编译为css
        ],
        exclude: /\.module\.less$/,
      },
      {
        test: /\.module\.less$/i, // 基于正则匹配：哪些文件是我们需要处理的
        use: [
          'style-loader', // 将 CSS 插入到 DOM 中
          {
            loader: 'css-loader',
            options: {
              modules: {
                localIdentName: '[name]__[local]___[hash:base64:5]', // CSS Modules 的类名格式
                namedExport: false, // 启用 CSS Modules 命名导出
              },
              sourceMap: true, // 启用 source maps（可选）
            },
          },
          'less-loader', // 将 Less 编译为 CSS
        ],
      },
      {
        test: /\.js$/,
        use: ['babel-loader'],
        exclude: /node_modules/,
      },
      {
        test: /\.tsx?$/, //匹配.ts和.tsx文件
        exclude: /node_modules/, //排除node_modules
        use: {
          loader: 'swc-loader',
          options: {
            jsc: {
              parser: {
                syntax: 'typescript', //解析typescript
                tsx: true, //支持tsx
              },
              transform: {
                decoratorMetadata: true, //支持装饰器元数据
              },
            },
          },
        },
      },
      //处理图片文件
      {
        test: /.(png|jpg|jpeg|gif|svg)$/, // 匹配图片文件
        type: 'asset', // type选择asset
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024, // 小于10kb转base64位
          },
        },
        generator: {
          filename: 'dist/images/[name][ext]', // 文件输出目录和命名
        },
      },
    ],
  },
  devServer: {
    //利用 gzips 压缩 public/ 目录当中的所有内容并提供一个本地服务
    static: {
      directory: path.join(__dirname, 'src'),
    },
    host: '127.0.0.1', //域名
    port: 8080, //端口号
    open: true, //自动打开浏览器
    hot: true, //热更新
    compress: true, //开启服务器端的GZIP压缩
    proxy: [
      {
        context: ['/api'],
        target: 'http://localhost:7001',
        // pathRewrite: { '^/api': '' },
        changeOrigin: true,
        ws: true,
      },
    ],
    historyApiFallback: true, //重定向所有的404到/index.html；
  },
};
module.exports = smp.wrap(config);
